{% extends 'myadmin/base.html' %}
{% block main_body %}
<!-- 内容头部 -->
<section class="content-header">
    <h1>
        控制面板
        <small>首页</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="all-admin-index.html"><i class="fa fa-home"></i> 首页</a></li>
        <li class="active">控制面板</li>
    </ol>
</section>
<!-- 内容头部 /-->


<!-- 快捷操作区 -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-cogs"></i> 快捷操作</h3>
                </div>
                <div class="box-body">
                    <div class="operation-buttons">
                        <a href="{% url 'myadmin_systemnotice_add' %}" class="operation-card bg-red">
                            <div class="operation-icon">
                                <i class="fa fa-bullhorn fa-lg"></i>
                            </div>
                            <div class="operation-text">发布系统通知</div>
                        </a>
                        <a href="{% url 'myadmin_foods_add' %}" class="operation-card bg-green">
                            <div class="operation-icon">
                                <i class="fa fa-carrot fa-lg"></i>
                            </div>
                            <div class="operation-text">添加食物</div>
                        </a>
                        <a href="{% url 'myadmin_dietplan_add' %}" class="operation-card bg-yellow">
                            <div class="operation-icon">
                                <i class="fa fa-calendar fa-lg"></i>
                            </div>
                            <div class="operation-text">创建饮食计划</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 统计数值 -->
<section class="content">
    <div class="row">
        <!-- 1. 今日饮食达标用户数 -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3 id="compliance-count" class="stat-value">{{ compliance_count|default:0 }}</h3>
                    <p>今日饮食达标用户</p>
                </div>
                <div class="icon">
                    <i class="fa fa-check-circle"></i>
                </div>
                <a href="{% url 'myadmin_daily_compliance_detail' %}" class="small-box-footer">
                    查看详情 <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <!-- 2. 新增注册用户 -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3 id="new-users-count" class="stat-value">{{ new_users_count|default:0 }}</h3>
                    <p>今日新增用户</p>
                </div>
                <div class="icon">
                    <i class="fa fa-user-plus"></i>
                </div>
                <a href="{% url 'myadmin_new_users_detail' %}" class="small-box-footer">
                    查看详情 <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <!-- 3. 待处理饮食计划 -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3 id="pending-diets-count" class="stat-value">{{ pending_diets_count|default:0 }}</h3>
                    <p>待审核饮食计划</p>
                </div>
                <div class="icon">
                    <i class="fa fa-clock"></i>
                </div>
                <a href="{% url 'myadmin_pending_diets_detail' %}" class="small-box-footer">
                    查看详情 <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <!-- 4. 系统通知 -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3 id="system-notices-count" class="stat-value">{{ system_notices_count|default:0 }}</h3>
                    <p>新系统通知</p>
                </div>
                <div class="icon">
                    <i class="fa fa-bell"></i>
                </div>
                <a href="{% url 'myadmin_system_notices_detail' %}" class="small-box-footer">
                    查看详情 <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>



<style>
/* 统计数字动画效果 */
.stat-value {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stat-value:hover {
    transform: scale(1.05);
}

/* 快捷操作区样式优化 */
.operation-buttons {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.operation-card {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.operation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    color: #fff;
    text-decoration: none;
}

.operation-icon {
    margin-right: 15px;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.operation-text {
    font-size: 16px;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .operation-card {
        flex: 100%;
        max-width: 100%;
    }
}
</style>

<script>
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 立即刷新所有统计数据并添加动画
    refreshAllCounts(true);
    // 每30秒自动刷新一次
    setInterval(() => refreshAllCounts(), 30000);
});

// 刷新所有统计数据，支持数字变化动画
function refreshAllCounts(initial = false) {
    // 刷新系统通知数
    fetch("{% url 'myadmin_system_notices_refresh' %}")
        .then(response => {
            if (!response.ok) throw new Error('系统通知刷新失败');
            return response.text();
        })
        .then(count => {
            updateStatValue('system-notices-count', count, initial);
        })
        .catch(error => console.error('系统通知刷新错误:', error));

    // 刷新饮食达标用户数
    fetch("{% url 'myadmin_daily_compliance_count' %}")
        .then(response => {
            if (!response.ok) throw new Error('饮食达标用户刷新失败');
            return response.text();
        })
        .then(count => {
            updateStatValue('compliance-count', count, initial);
        })
        .catch(error => console.error('饮食达标用户刷新错误:', error));

    // 刷新新增用户数
    fetch("{% url 'myadmin_new_users_count' %}")
        .then(response => {
            if (!response.ok) throw new Error('新增用户刷新失败');
            return response.text();
        })
        .then(count => {
            updateStatValue('new-users-count', count, initial);
        })
        .catch(error => console.error('新增用户刷新错误:', error));

    // 刷新待处理饮食计划数
    fetch("{% url 'myadmin_pending_diets_count' %}")
        .then(response => {
            if (!response.ok) throw new Error('待处理饮食计划刷新失败');
            return response.text();
        })
        .then(count => {
            updateStatValue('pending-diets-count', count, initial);
        })
        .catch(error => console.error('待处理饮食计划刷新错误:', error));
}

// 统计数字变化动画
function updateStatValue(elementId, newValue, initial = false) {
    const element = document.getElementById(elementId);
    if (!element) return;
    
    const oldValue = parseInt(element.textContent) || 0;
    newValue = parseInt(newValue) || 0;
    
    // 只有值变化且不是初始加载时才显示动画
    if (oldValue !== newValue && !initial) {
        element.classList.add('text-bold');
        element.style.transform = 'scale(1.1)';
        
        setTimeout(() => {
            element.textContent = newValue;
            element.style.transform = 'scale(1)';
            
            setTimeout(() => {
                element.classList.remove('text-bold');
            }, 300);
        }, 300);
    } else {
        element.textContent = newValue;
    }
}
</script>
{% endblock %}